<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="box">
    {{ message }}
    <p v-once> {{ message }}</p>
    <p v-html="html"></p>
    <input v-model="message" v-show="flag"/>
    <input v-model.lazy="message" v-if="flag"/>
    <input type="text" :value="message">
    <a v-bind:[attr]="url">百度</a>
    <a :href="url" @click.prevent="say('url')">百度</a>

    <button v-on:click="show">显示</button>
    <button @click="show">显示</button>
    <button @click.prevent="say('hello')">say</button>

    {{ num + 1}}
    <hr />
    <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
    <div v-if="num % 3 == 0">div1</div>
    <div v-else-if="num % 3 == 1">div2</div>
    <div v-else="num % 3 == 2">div3</div>

    <ul>
        <li v-for="(name, index) in names">
            {{name}} - {{ index }}
        </li>
        <li v-for="(value, key) in student">
            {{value}} - {{ key }}
        </li>
        <li v-for="n in 5">
            {{ n }}
        </li>
    </ul>

    <hr />

    <div @click="say('out')">
        <span @click.stop="say('in')">span</span>
    </div>
</div>

<script src="/static/lib/vue/vue.global.js"></script>
<script>

    // 创建 vue 实例
    let options = {
        // data(){}
        data: function(){
            return{
                message: 'Hello Vue!',
                html: '<button>按钮</button>',
                url: 'https://www.baidu.com',
                flag: false,
                num: 1,
                attr: 'href',
                names: ['张三', '李四', '王五'],
                student: {
                    name: '张三',
                    age: 20
                }
            }
        },
        methods:{
            show(){
                this.flag = !this.flag;
            },
            say(msg){
                alert(msg);
            }
        }
    };
    const app = Vue.createApp(options);

    // 将应用挂载到 DOM 元素上
    const vm = app.mount('#box');

</script>
</body>
</html>